{
	//模拟ajax请求
	//1 回调函数实现异步
	let ajax=function(callback){
		console.log('执行1...');//先执行ajax
		//一秒钟后执行回调函数
		setTimeout(function(){
			callback&&callback.call()
		},1000)
	};
	ajax(()=>console.log('timeout1'))
	/*
	 执行1...
	 timeout1    (1秒后输出)
	 * */
}
{
	//模拟ajax请求
	//1 Promise实现异步
	let ajax=function(){
		console.log('执行2...');//先执行ajax
		// resolve:要执行的下一步操作    reject:终止当前操作
		return new Promise(function(resolve,reject){
			setTimeout(function(){
				resolve();
			},1000);
		});
	};
	//ajax执行完返回一个Promise对象
	// .then() 执行Promise对象的.then方法,.then()如果有两个函数参数,第二个就是reject
	ajax().then(()=>console.log('timeout2'))
	/**
	 * 执行1...
              执行2...
       timeout1
       timeout2
	 */
}
{
	let ajax=function(){
		console.log('执行2...');//先执行ajax
		// resolve:要执行的下一步操作    reject:终止当前操作
		return new Promise(function(resolve,reject){
			setTimeout(function(){
				resolve();
			},1000);
		});
	};
	
	//执行完then后,又返回一个Promise对象,
	//可以继续执行他的then方法,达到下一步再下一步的效果,从而无限嵌套
	ajax().then(function(){
		console.log('timeout2');
		return new Promise(function(resolve,reject){
			setTimeout(function(){
				resolve();
			},2000);
		});
	}).then(function(){
		console.log('timeout3');
	})
	/**
	 * 执行1...
	 * timeout2
	 * timeout3
	 */
}
{
	//catch捕获异常
	let ajax=function(num){
		console.log('执行2...');
		return new Promise(function(resolve,reject){
			if(num>5){
				resolve();
			}else{
				throw new Error('出错了');
			}
		});
	};
	ajax(6).then(()=>console.log('timeout2')).catch(err=>console.log(err)); //正常输出 timeout2
	ajax(3).then(()=>console.log('timeout2')).catch(err=>console.log(err)); //报错
}
{
	//加载图片
	function loadImg(src){
		return new Promise((resolve,reject)=>{
			let img=document.createElement('img');
			img.src=src;
			//onload 事件会在页面或图像加载完成后立即发生
			img.onload=function(){
				resolve(img);
			};
			img.onerror=function(){
				reject(err);
			};
		});
	}
	//添加图片到 页面
	function showImgs(imgs){
		//遍历图片添加到页面
		imgs.forEach(function(img){
			document.body.appendChild(img);
		})
	}
	//Promise.all用法:所有图片都加载完成后再添加到页面
	/**
	 * 把多个Promise实例当成一个Promise实例,返回一个新的Promise实例
	 * 参数是一个含有Promise对象的数组,只有当参数中promise对象状态都改变(触发下一步或者终止操作),
	 * 即图片都加载完成,才会触发新的Promise实例的then方法
	 */
	Promise.all([
		loadImg('https://ss0.bdstatic.com/6ONWsjip0QIZ8tyhnq/it/u=1618097094,4154452434&fm=77&w_h=121_75&cs=423647557,799948659'),
		loadImg('https://ss0.bdstatic.com/6ONWsjip0QIZ8tyhnq/it/u=3618554304,2887917621&fm=77&w_h=121_75&cs=2820658166,1330608299'),
		loadImg('https://ss0.bdstatic.com/6ONWsjip0QIZ8tyhnq/it/u=648300297,3284313282&fm=77&w_h=121_75&cs=1136402502,639612303')
	]).then(showImgs)
}

{
	//加载图片
	function loadImg(src){
		return new Promise((resolve,reject)=>{
			let img=document.createElement('img');
			img.src=src;
			//onload 事件会在页面或图像加载完成后立即发生
			img.onload=function(){
				resolve(img);
			};
			img.onerror=function(){
				reject(err);
			};
		});
	}
	//添加图片到 页面
	function showImg(img){
		let p=document.createElement('p');
		p.appendChild(img);document.body.appendChild(p);
	}
	//Promise.race用法:所有Promise实例中,那个状态先改变就先执行then方法,其他的不再执行
	//即,只会显示速度最快的一张图片
	Promise.race([
		loadImg('https://ss0.bdstatic.com/6ONWsjip0QIZ8tyhnq/it/u=1618097094,4154452434&fm=77&w_h=121_75&cs=423647557,799948659'),
		loadImg('https://ss0.bdstatic.com/6ONWsjip0QIZ8tyhnq/it/u=3618554304,2887917621&fm=77&w_h=121_75&cs=2820658166,1330608299'),
		loadImg('https://ss0.bdstatic.com/6ONWsjip0QIZ8tyhnq/it/u=648300297,3284313282&fm=77&w_h=121_75&cs=1136402502,639612303')
	]).then(showImg)
}
